<template>
    <div>
        <h2>第十三届山东省ICPC大学生程序设计竞赛(正式赛)</h2>
    </div>
  
    <div class="box all"><button>所有队伍</button></div>
    <div class="box concerned"><button>关注队伍</button></div>
    <div class="box form"><button>正式队伍</button></div>
    <div class="box star"><button>打星队伍</button></div>
    <div class="box" id="select">
      <select 
      class="form-select"
       id="Select" 
       aria-label="Default select example">
        <option selected value="0">School Filter</option>
        <option value="1" class="lcu">聊城大学</option>
        <option value="2">临沂大学</option>
        <option value="3">山东大学</option>
        <option value="4">山东理工大学</option>
        <option value="5">中国海洋大学</option>
    </select>
    </div>
      
    <div class="left"></div>
      <div class="mid">
        <table class="Tab">
          <tr>
            <th>Place</th>
            <th>School</th>
            <th>Team</th>
            <th>Solved</th>
            <th>Time</th>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
          </tr>
          <tr>
              <td>1</td>
              <td>{{it[0].sname}}</td>
              <td>{{it[0].tname}}</td>
              <td>{{it[0].ac_cnt}}</td>
              <td>{{it[0].fashi}}</td>
              <td>{{it[0].scA}}</td>
              <td>{{it[0].scB}}</td>
              <td>{{it[0].scC}}</td>
              <td>{{it[0].scD}}</td> 
            </tr>
            <tr>
              <td>2</td>
              <td>{{it[1].sname}}</td>
              <td>{{it[1].tname}}</td>
              <td>{{it[1].ac_cnt}}</td>
              <td>{{it[1].fashi}}</td>
              <td>{{it[1].scA}}</td>
              <td>{{it[1].scB}}</td>
              <td>{{it[1].scC}}</td>
              <td>{{it[1].scD}}</td>
            </tr>
            <tr>
              <td>3</td>
              <td>{{it[2].sname}}</td>
              <td>{{it[2].tname}}</td>
              <td>{{it[2].ac_cnt}}</td>
              <td>{{it[2].fashi}}</td>
              <td>{{it[2].scA}}</td>
              <td>{{it[2].scB}}</td>
              <td>{{it[2].scC}}</td>
              <td>{{it[2].scD}}</td>
            </tr>
            <tr>
              <td>4</td>
              <td>{{it[3].sname}}</td>
              <td>{{it[3].tname}}</td>
              <td>{{it[3].ac_cnt}}</td>
              <td>{{it[3].fashi}}</td>
              <td>{{it[3].scA}}</td>
              <td>{{it[3].scB}}</td>
              <td>{{it[3].scC}}</td>
              <td>{{it[3].scD}}</td>
            </tr>
        </table>
      </div>
      <div class="right"></div>
      <router-view/>
  </template>
  <script>
    import "bootstrap/dist/css/bootstrap.min.css"
    import "bootstrap/dist/js/bootstrap"
    import $ from 'jquery';
    import { ref } from 'vue';
    export default{
      name : "SDU",
      setup : () => {
        let it = ref("");
        $.ajax({
          url :"http://127.0.0.1:1234/index/all/sdu/",
          type :"get",
          success: resp => {
            it.value = resp;  
          }
        });
        return {
          it,
        } 
      }    
    }
    $(function () {
        $(".all").click(function(){
          window.location.href="http://localhost:8080/all/";
         });
         $(".concerned").click(function(){
          window.location.href="http://localhost:8080/concerned/";
         });
         $(".form").click(function(){
          window.location.href="http://localhost:8080/form/";
         });
         $(".star").click(function(){
          window.location.href="http://localhost:8080/star/";
         });
        var selects = document.getElementById("Select");
    selects.onchange = function () {
      var indexs = selects.selectedIndex;  //选中项的索引
      var s = selects.options[indexs].value;
      console.log(s);
      if(s == 1)
      {
        console.log("su");
        window.location.href="http://localhost:8080/lcu/";
      }
      else if(s == 2)
      {
        window.location.href="http://localhost:8080/lyu/";
      }
      else if(s == 3)
      {
        window.location.href="http://localhost:8080/sdu/";
      }
      else if(s == 4)
      {
        window.location.href="http://localhost:8080/sdlgu/";
      }
      else if(s == 5)
      {
        window.location.href="http://localhost:8080/seau/";
      }
  
      }
       
      })
     
  
  </script>
  <style>
  
  .box{
    float: left;
    margin-right: 12px;
    margin-bottom: 10px;
  }
  h2{
    text-align: center;
    font-size: 30px;
    font-weight: normal;
    letter-spacing: 4px;
  }
  tr{
    text-align: center;
  }
  th{
    background-color: bisque;
  }
  input{
    width: 100px;
    height: 25px;
    line-height: 25px;
    text-align: center;
  }
  table{
    width: 170vh;
    height: 10vh;
    margin: 20px auto;
  }
  tr:nth-child(odd){
    background-color: rgb(248,248,248,);
  }
  tr:nth-child(even){
    background-color: rgb(242, 242, 242);
  }
  </style>
  